﻿<phone:PhoneApplicationPage
    x:Class="CompanyHub.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="White"></Setter>
            </Style>
        </Grid.Resources>
        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

        <!--Panorama control-->
        <phone:Panorama Title="ideabinder">
            <phone:Panorama.TitleTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,70,0,40">
                        <Image x:Name="HeaderImage" Margin="20,20,0,0" Source="/Assets/logo.png" Stretch="None"/>
                    </StackPanel>
                </DataTemplate>
            </phone:Panorama.TitleTemplate>
            <phone:Panorama.Background>
                <ImageBrush ImageSource="/Assets/bg.png" />
            </phone:Panorama.Background>

            <!--installed apps-->
            <phone:PanoramaItem Header="我的应用" HeaderTemplate="{StaticResource ideabinderItemHeaderTemplate}">
                <ScrollViewer>
                    <Grid Margin="13,2,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Grid.Resources>
                            <Style TargetType="Image">
                                <Setter Property="Width" Value="200" />
                                <Setter Property="Height" Value="200" />
                                <Setter Property="Stretch" Value="Fill" />
                            </Style>
                        </Grid.Resources>

                        <StackPanel Grid.Column="0" Orientation="Vertical" Margin="0,0,5,0" x:Name="InstalledAppLineOne">
                        </StackPanel>
                        <StackPanel Grid.Column="1" Orientation="Vertical" x:Name="InstalledAppLineTwo">
                        </StackPanel>
                    </Grid>
                </ScrollViewer>
            </phone:PanoramaItem>

            <!--apps for me-->
            <phone:PanoramaItem>
                <phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding CompanyApps}"
                                        SelectionChanged="CompanyAppLongListSelector_SelectionChanged" x:Name="CompanyAppList">
                    <phone:LongListSelector.ListHeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="12,0,0,38">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <TextBlock Text="应用列表"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           Grid.Row="0"
                                           FontSize="36" 
                                           Foreground="White"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ListHeaderTemplate>
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="10,2,0,4" Height="137" Width="432" Background="Transparent">
                                <Grid Width="137" Height="137" Background="#007dbf">
                                    <Image Source="{Binding LoadedSource}" 
                                           VerticalAlignment="Center" Stretch="Fill" />
                                </Grid>
                                <Grid>
                                    <StackPanel Width="280" Margin="4,-7,0,0">
                                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Margin="10,0"
                                                   Style="{StaticResource PhoneTextExtraLargeStyle}"
                                                   FontSize="{StaticResource PhoneFontSizeLarge}" 
                                                   Foreground="White"/>
                                        <TextBlock Text="{Binding Detail}" TextWrapping="Wrap" Margin="10,-2,10,0"
                                                   Style="{StaticResource PhoneTextSubtleStyle}" 
                                                   Foreground="LightCyan"/>
                                    </StackPanel>

                                    <Grid Margin="12,-5,0,5" VerticalAlignment="Bottom">
                                        <StackPanel Orientation="Horizontal"     Visibility="{Binding InstallState,Converter={StaticResource packageInstallStateToVisibilityConverter},ConverterParameter=Installed}">
                                            <Rectangle Fill="#5da63d" Width="5" Height="20"></Rectangle>
                                            <TextBlock Text="已安装"
                                               Style="{StaticResource PhoneTextSubtleStyle}"
                                                       Foreground="LightCyan"
                                               />
                                        </StackPanel>

                                        <Grid Margin="0,0,0,10" Visibility="{Binding InstallState,Converter={StaticResource packageInstallStateToVisibilityConverter},ConverterParameter=Installing}" >
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
                                            <ProgressBar Foreground="#5da63d" 
                                                     IsIndeterminate="False"
                                                         Grid.Column="0"
                                                     Value="{Binding InstalltionProgressPercent}"/>
                                            <TextBlock Text="{Binding InstalltionProgressPercent,Converter={StaticResource percentConverter}}"
                                               Style="{StaticResource PhoneTextSubtleStyle}"
                                                       Foreground="LightCyan"
                                                       TextAlignment="Right"
                                                       Grid.Column="1"
                                               />
                                        </Grid>
                                            
                                    </Grid>

                                </Grid>

                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>


            <!--news headlines-->
            <phone:PanoramaItem Header="热点新闻" Orientation="Horizontal" HeaderTemplate="{StaticResource ideabinderItemHeaderTemplate}">

                <toolkit:WrapPanel Orientation="Vertical" Margin="10,0,0,0">
                    <toolkit:WrapPanel.Resources>
                        <SolidColorBrush x:Name="NewsBackgroundBrush" Color="#007dbf"/>

                        <Style TargetType="TextBlock">
                            <Setter Property="Foreground" Value="White"></Setter>
                        </Style>

                        <Style TargetType="Grid" x:Name="NewsItemGridStyle">
                            <Setter Property="Background" Value="{StaticResource NewsBackgroundBrush}"/>
                            <Setter Property="Height" Value="120"/>
                            <Setter Property="Width" Value="220"/>
                        </Style>

                        <Style TargetType="TextBlock" x:Name="NewsTitleTextBlockStyle">
                            <Setter Property="FontSize" Value="17"></Setter>
                            <Setter Property="Margin" Value="10,10,10,3"></Setter>
                            <Setter Property="TextWrapping" Value="Wrap"></Setter>
                            <Setter Property="Foreground" Value="White"></Setter>
                        </Style>

                        <Style TargetType="TextBlock" x:Name="NewsDateTextBlockStyle">
                            <Setter Property="Foreground" Value="LightCyan"></Setter>
                            <Setter Property="FontSize" Value="14"></Setter>
                            <Setter Property="Margin" Value="10,0,10,3"></Setter>
                            <Setter Property="TextWrapping" Value="Wrap"></Setter>
                        </Style>

                        <Style TargetType="TextBlock" x:Name="NewsContentTextBlockStyle">
                            <Setter Property="FontSize" Value="14"></Setter>
                            <Setter Property="Margin" Value="10,0,10,0"></Setter>
                            <Setter Property="TextWrapping" Value="Wrap"></Setter>
                            <Setter Property="Foreground" Value="White"></Setter>
                        </Style>
                    </toolkit:WrapPanel.Resources>
                    <Grid  Height="250" Background="{StaticResource NewsBackgroundBrush}" Width="220" Margin="0,0,10,0">

                        <Grid.RowDefinitions>
                            <RowDefinition Height="160"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Image Grid.Row="0" Stretch="Fill" Source="/Assets\News\newsHeadLine.png"></Image>
                        <StackPanel Grid.Row="1" Orientation="Vertical">
                            <TextBlock Text="用研经典14种方法传遍中国" Style="{StaticResource NewsTitleTextBlockStyle}"/>
                            <TextBlock Text="2013-02-05 19:32AM" Style="{StaticResource NewsDateTextBlockStyle}"/>
                            <TextBlock Text="历时2个多月的编撰和设计，#用研" Style="{StaticResource NewsContentTextBlockStyle}"/>
                        </StackPanel>
                    </Grid>

                    <Grid Style="{StaticResource NewsItemGridStyle}" Margin="0,10,10,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="3*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="移动应用的三种空状态界面设计"  Style="{StaticResource NewsTitleTextBlockStyle}"/>
                        <TextBlock Grid.Row="1" Text="2013-02-05 19:32AM"  Style="{StaticResource NewsDateTextBlockStyle}"/>
                        <TextBlock Grid.Row="2" Text="长久以来，空状态界面一直是被忽视的，
因为设计师们通常会将全部精力集中在" Style="{StaticResource NewsContentTextBlockStyle}"/>
                    </Grid>

                    <Grid  Style="{StaticResource NewsItemGridStyle}" Margin="0,10,10,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="3*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="酷！让你的浏览器1秒钟变记
事本"  Style="{StaticResource NewsTitleTextBlockStyle}"/>
                        <TextBlock Grid.Row="1" Text="2013-02-05 19:32AM"  Style="{StaticResource NewsDateTextBlockStyle}"/>
                        <TextBlock Grid.Row="2" Text="好了，各位看官，原谅我占用你们一点
时间，因为这里有一个非常实用的浏览" Style="{StaticResource NewsContentTextBlockStyle}"/>
                    </Grid>

                    <Grid  Style="{StaticResource NewsItemGridStyle}" Margin="0,0,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="3*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="甲方乙方：数据分析内外有别
设计" Style="{StaticResource NewsTitleTextBlockStyle}"/>
                        <TextBlock Grid.Row="1" Text="2013-02-05 19:32AM"  Style="{StaticResource NewsDateTextBlockStyle}"/>
                        <TextBlock Grid.Row="2" Text="这是一个大数据时代，人人嘴边都挂着数据创造价值、数据挖掘等一些热词
"  Style="{StaticResource NewsContentTextBlockStyle}"/>
                    </Grid>
                    <Grid  Style="{StaticResource NewsItemGridStyle}" Margin="0,10,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="3*"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="数据可视化 6 步法" Style="{StaticResource NewsTitleTextBlockStyle}"/>
                        <TextBlock Grid.Row="1" Text="2013-02-05 19:32AM" Style="{StaticResource NewsDateTextBlockStyle}"/>
                        <TextBlock Grid.Row="2" Text="各种数据可视化图标层出不穷，本文尝试对数据可视化的方法进行归纳，整理"  Style="{StaticResource NewsContentTextBlockStyle}"/>
                    </Grid>
                </toolkit:WrapPanel>


            </phone:PanoramaItem>


            <!--alert center-->
            <phone:PanoramaItem Header="消息通知" HeaderTemplate="{StaticResource ideabinderItemHeaderTemplate}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="2*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal" Height="120">
                            <Grid Width="120" Height="120" DataContext="{Binding Date}" Margin="10,5,0,0"
                                  Background="#c93537">
                                <Grid Width="100" Margin="5,0,0,0" Height="120">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="2*" />
                                    </Grid.RowDefinitions>
                                    <TextBlock Grid.Row="0" Text="星期一" />
                                    <TextBlock Grid.Row="1" Text="二月" />
                                    <TextBlock Grid.Row="2" FontSize="50" VerticalAlignment="Bottom" Text="6" />
                                </Grid>
                            </Grid>
                            <TextBlock Text="新的软件已经更新，可供下载" VerticalAlignment="Top" MaxWidth="280" Margin="10,0,0,0"
                                       TextWrapping="Wrap" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Height="120">
                            <Grid Width="120" Height="120" DataContext="{Binding Date}" Margin="10,5,0,0"
                                  Background="#5da63d">
                                <Grid Width="100" Margin="5,0,0,0" Height="120">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="2*" />
                                    </Grid.RowDefinitions>
                                    <TextBlock Grid.Row="0" Text="星期日" />
                                    <TextBlock Grid.Row="1" Text="二月" />
                                    <TextBlock Grid.Row="2" FontSize="50" VerticalAlignment="Bottom" Text="5" />
                                </Grid>
                            </Grid>
                            <TextBlock Text="您的密码将在两天后过期，请尽快修改" VerticalAlignment="Top" MaxWidth="280"
                                       Margin="10,0,0,0" TextWrapping="Wrap" />
                        </StackPanel>
                    </StackPanel>

                    <StackPanel Orientation="Vertical" Margin="10,0,0,0" Grid.Row="1">
                        <Grid Background="#5da63d">
                            <TextBlock Text="提醒" />
                        </Grid>

                        <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
                            <Rectangle Fill="LightBlue" Width="3" Height="20" Margin="5,0,5,0" />
                            <TextBlock Text="Li: 关于软件更新的问题已回复，感谢您提出的问题" FontSize="17" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
                            <Rectangle Fill="LightBlue" Width="3" Height="20" Margin="5,0,5,0" />
                            <TextBlock Text="Zhou: 新系统使用问题已回复" FontSize="17" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
                            <Rectangle Fill="LightBlue" Width="3" Height="20" Margin="5,0,5,0" />
                            <TextBlock Text="Li: 邮件发送问题已解决，如有问题请联系" FontSize="17" />
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </phone:PanoramaItem>

            <!--profile-->
            <phone:PanoramaItem Header="我的信息" HeaderTemplate="{StaticResource ideabinderItemHeaderTemplate}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <Grid Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Image Height="190" Width="190" Grid.Column="0" Source="/Assets/avatar.png" Stretch="Fill"
                               Margin="15,0,10,0" />

                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <TextBlock Text="李艺一" TextWrapping="Wrap" FontSize="30" Margin="0,0,0,0" Grid.Row="0"
                                       VerticalAlignment="Top" />

                            <StackPanel Orientation="Vertical" Grid.Row="1" VerticalAlignment="Bottom">
                                <StackPanel.Resources>
                                    <Style TargetType="TextBlock" BasedOn="{StaticResource PhoneTextSubtleStyle}">
                                        <Setter Property="VerticalAlignment" Value="Center" />
                                        <Setter Property="TextWrapping" Value="Wrap" />
                                        <Setter Property="MaxWidth" Value="200" />
                                        <Setter Property="Foreground" Value="LightCyan"></Setter>
                                    </Style>
                                    <Style TargetType="Image">
                                        <Setter Property="Width" Value="40" />
                                        <Setter Property="Height" Value="40" />
                                    </Style>
                                </StackPanel.Resources>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="/Assets/Profiles/user.png" Stretch="None"></Image>
                                    <TextBlock Text="正在忙碌中" />
                                </StackPanel>

                                <StackPanel Orientation="Horizontal">
                                    <Image Source="/Assets/Profiles/calendar.png" Stretch="None"></Image>
                                    <TextBlock Text="42 分钟后有会议" />
                                </StackPanel>

                                <StackPanel Orientation="Horizontal">
                                    <Image Source="/Assets/Profiles/mail.png"></Image>
                                    <TextBlock Text="14 封未读邮件" />
                                </StackPanel>
                            </StackPanel>
                        </Grid>
                    </Grid>


                    <StackPanel Margin="0,20,0,0" Orientation="Vertical" Grid.Row="1">
                        <Rectangle Fill="Blue" />
                        <Image Width="390" Height="200" Source="/Assets/map.png" Stretch="Fill" Margin="15,0,20,0" />

                        <TextBlock Text="团队成员" Margin="13,30,0,0" />
                        <TextBlock Text="联系方式" Margin="13,0,0,0" />
                    </StackPanel>

                </Grid>
            </phone:PanoramaItem>

        </phone:Panorama>
        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
        <ProgressBar IsIndeterminate="True" VerticalAlignment="Top"  Foreground="#5da63d" x:Name="LoadingBar" Visibility="Collapsed" />
    </Grid>
</phone:PhoneApplicationPage>